<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>回顾童年</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/animated.css" />
    <script defer src="./js/constant.js"></script>
    <script defer src="./js/utils.js"></script>
    <script defer src="./js/audio.js"></script>
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <div class="container">
      <audio src="./audio/童年的和谐.mp3"></audio>
      <div class="play-switch">播放</div>
      <div class="page load">
        <div class="clock">
          <img src="./images/p1/表盘2.png" alt="" />
          <img src="./images/p1/表盘.png" alt="" />
          <img class="watch-hand" src="./images/p1/表针.png" alt="" />
          <img class="person" src="./images/p1/人物.png" alt="" />
          <span class="year">2019</span>
        </div>
        <div class="footer">
          <img src="./images/p1/回到童年....png" alt="" />
        </div>
      </div>
      <div class="page p1">
        <span class="title">童年是什么样子的呢?</span>
        <ul class="text">
          <li>有人说：童年就是过年</li>
          <li>有人说：童年就是过年</li>
          <li>有人说：童年就是过年</li>
          <li>有人说：童年就是过年</li>
        </ul>
      </div>
      <div class="page p2">
        <div class="header">
          <img src="./images/p2/标题.png" alt="">
        </div>
        <ul class="body">
          <li>
            <img src="./images/p2/菜单1 .png" alt="">
            <img src="./images/p2/童年是记忆中的年.png" alt="">
          </li>
          <li>
            <img src="./images/p2/菜单2 .png" alt="">
            <img src="./images/p2/童年是村口的小卖铺.png" alt="">
          </li>
          <li>
            <img src="./images/p2/菜单3 .png" alt="">
            <img src="./images/p2/童年是有理想的年纪.png" alt="">
          </li>
          <li>
            <img src="./images/p2/菜单4.png" alt="">
            <img src="./images/p2/童年就是简单的快乐.png" alt="">
          </li>
        </ul>
      </div>
      <div class="page p3">
        <div class="mask"></div>
        <div class="back" onclick="Main.prev()">
          <img src="./images/p3/返回.png" alt="">
        </div>
        <div class="title">
          <img src="./images/p3/标题.png" alt="">
          <img src="./images/p3/边框1.png" alt="">
        </div>
        <ul class="list">
          <li><img src="./images/p3/衣服.png" alt=""></li>
          <li><img src="./images/p3/鞭炮.png" alt=""></li>
          <li><img src="./images/p3/饺子.png" alt=""></li>
        </ul>
        <div class="layer">
          <div class="memory posi-center">
            <div>回忆录：</div>
            <div class="text">过年放鞭炮，从小年三十守夜的时候，爸爸就让我去放鞭炮，有点喜欢那种感觉呢！</div>
          </div>
        </div>
      </div>
      <div class="page p4">
        <div class="back" onclick="Main.prev()">
          <img src="./images/p3/返回.png" alt="">
        </div>
        <div class="header">
          <img src="./images/p4/文字.png" alt="">
          <div class="title posi-center">
            <img src="./images/p4/标题.png" alt="">
            <span>选择物品查看童年回忆吧</span>
          </div>
        </div>
        <ul class="list">
          <li><img src="./images/p4/风车.png" alt=""></li>
          <li><img src="./images/p4/山楂卷.png" alt=""></li>
          <li><img src="./images/p4/拨浪鼓.png" alt=""></li>
          <li><img src="./images/p4/游戏机.png" alt=""></li>
          <li><img src="./images/p4/电视机.png" alt=""></li>
          <li><img src="./images/p4/糖葫芦.png" alt=""></li>
        </ul>
        <div class="p4-item">
          <div class="pic">
            <img src="./images/p4/城市背景.png" alt="">
          </div>
          <div class="content">
            <div class="header">
              <img class="leftImg" src="./images/p4/拨浪鼓.png" alt="">
              <img src="./images/p4/致童年.png" alt="">
            </div>
            <div class="text">
              童年对我来说不再是<span>拨浪鼓</span>了小时候的我一直希望自己可以快点长大；现在的我则是希望自己可以再年轻一些
            </div>
            <div class="footer">
              <div class="tip">长按保存</div>
              <img src="./images/p4/继续选择按钮.png" alt="" class="continue">
              <img src="./images/p4/确定按钮.png" alt="" class="ok">
            </div>
          </div>
        </div>
      </div>
      <div class="page p5">
        <div class="back" onclick="Main.prev()">
          <img src="./images/p3/返回.png" alt="">
        </div>
        <ul class="list">
          <li><img src="./images/p5/点个赞.png" alt=""></li>
          <li><img src="./images/p5/为童年的理想点赞.png" alt=""></li>
          <li>
            <div><img src="./images/p5/宇航员.jpg" alt=""></div>
            <div><img src="./images/p5/航海梦.jpg" alt=""></div>
            <div><img src="./images/p5/音乐梦.jpg" alt=""></div>
          </li>
        </ul>
        <ul class="info">
          <li>
            <img src="./images/p5/宇航员.jpg" alt="">
            <img src="./images/p5/航天.png" alt="">
          </li>
          <li>
            <img src="./images/p5/航海梦.jpg" alt="">
            <img src="./images/p5/航海.png" alt="">
          </li>
          <li>
            <img src="./images/p5/音乐梦.jpg" alt="">
            <img src="./images/p5/音乐.png" alt="">
          </li>
        </ul>
      </div>
      <div class="page p6">
        <div class="back" onclick="Main.prev()">
          <img src="./images/p3/返回.png" alt="">
        </div>
        <div class="title">
          <img src="./images/p6/标题.png" alt="">
        </div>
        <span class="tab-dot"></span>
        <div class="content">
          <ul class="tabs">
              <li>跳房子</li>
              <li>抓石子</li>
              <li class="active">丢沙包</li>
              <li>打弹珠</li>
              <li>滚铁环</li>
          </ul>
          <ul class="list">
            <li><img src="./images/p6/跳房子.png" alt=""></li>
            <li><img src="./images/p6/抓石子.png" alt=""></li>
            <li class="active"><img src="./images/p6/丢沙包.png" alt=""></li>
            <li><img src="./images/p6/打弹珠.png" alt=""></li>
            <li><img src="./images/p6/滚铁环.png" alt=""></li>
          </ul>
        </div>
      </div>
  </body>
</html>
